<script setup lang="ts">
  import { reactive } from 'vue';
  import { getUserInfo, thirdLoginBind, userLogin } from '@/services/api/user';
  import { ThirdBindParams, UserLoginParams } from '@/services/api/type';
  import tokenUtil from '@/utils/tokenUtil';
  import storeUtil from '@/utils/storeUtil';
  import useUserStore from '@/store/modules/useUserStore';

  const userStore = useUserStore();
  let props = defineProps({
    activeName: {
      type: String,
      required: true,
    },
    uid: {
      type: String,
      required: false,
    },
  });

  // const emit = defineEmits<{ (e: 'update:active-name', value: string): void }>();
  const emit = defineEmits<(e: 'update:activeName', value: string) => void>();

  // 定义用户信息
  const userInfo = reactive({
    usernameLogin: '',
    passwordLogin: '',
    checkCode: '',
  });

  // 登录/注册的提交函数（可根据实际需求补充）
  const submitRegister = () => {
    emit('update:activeName', 'smsLogin');
  };

  const submitLogin = () => {
    if (props.uid) {
      thirdLogin();
    } else {
      loginByPass();
    }
  };

  const loginByPass = () => {
    const params: UserLoginParams = {
      account: userInfo.usernameLogin,
      password: userInfo.passwordLogin,
    };
    userLogin(params).then(({ data }) => {
      if (data != null) {
        loginSuccess(data);
      }
    });
  };

  const thirdLogin = () => {
    const params: ThirdBindParams = {
      account: userInfo.usernameLogin,
      password: userInfo.passwordLogin,
      uid: props.uid as string,
    };
    thirdLoginBind(params).then(({ data }) => {
      if (data != null) {
        loginSuccess(data);
      }
    });
  };

  const loginSuccess = (data: any) => {
    tokenUtil.setToken(data.tokenName, data.token, data.tokenTimeout);

    // 获取用户信息
    getUserInfo().then(res => {
      const userInfoData = res.data;
      userStore.updateUserInfo(userInfoData);
      storeUtil.setInfo('userInfo', userInfoData, data.tokenTimeout as number);
    });

    window.location.reload();
  };
</script>

<template>
  <div class="login-box">
    <div class="login-box-form">
      <!-- 登录账号输入框 -->
      <div class="login-box-item">
        <span class="login-box-item-title">账号</span>
        <el-input
          type="text"
          class="input"
          v-model="userInfo.usernameLogin"
          placeholder="请输入账号"
        />
      </div>

      <!-- 分隔线 -->
      <div class="login-box_separator-line"></div>

      <!-- 登录密码输入框 -->
      <div class="login-box-item">
        <span class="login-box-item-title">密码</span>
        <el-input
          type="password"
          show-password
          class="input"
          v-model="userInfo.passwordLogin"
          placeholder="请输入密码"
        />
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="login-box-btns">
      <div class="submit register-btn" @click="submitRegister">注&nbsp;册</div>
      <div class="submit login-btn" @click="submitLogin">登&nbsp;录</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  /* 全局样式优化：去除多余的重复规则，提升可读性 */
  .login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
  }

  .login-box-form {
    border-radius: 10px;
    border: 1px solid #e3e5e7;
    margin-bottom: 10px;
    width: 100%;
  }

  .login-box-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 5px;
    width: 100%;
  }

  .login-box-item-title {
    font-size: small;
    width: 40px;
    padding: 0 5px;
  }

  .login-box_separator-line {
    display: block;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #e3e5e7;
  }

  .login-box-btns {
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
  }

  .submit {
    border-radius: 4px;
    text-align: center;
    padding: 10px 15px;
    cursor: pointer;
    width: 50%;
  }

  .register-btn {
    margin-right: 10px;
    border: 1px solid #676768;
    &:hover {
      background-color: #53b0f3;
    }
  }

  .login-btn {
    background-color: #5fd5d5;
    color: #2f3238;
    &:hover {
      background-color: #00d8d8;
      color: #fff;
    }
  }

  .input {
    flex: 1;
  }

  .el-input {
    --el-input-focus-border: #ccc;
    --el-input-focus-border-color: #ccc;
    --el-input-border-radius: 10px;
    --el-input-height: 40px;
    border: none;
  }

  .el-input:deep(.el-input__wrapper) {
    -webkit-box-shadow: 0 0 0 0;
    padding: 0;
    font-size: small;
    background: none;
  }

  .el-input:deep(.el-input__icon) {
    margin-right: 8px;
  }
</style>
